Frontend Performance API: Опанування навігації та таймінгу ресурсів

У сучасному цифровому світі продуктивність веб-сайту має першочергове значення. Повільний сайт може призвести до розчарування користувачів, вищих показників відмов і, зрештою, до втрати доходу. Frontend Performance API надає потужні інструменти для вимірювання та аналізу різних аспектів продуктивності вашого сайту, дозволяючи виявляти вузькі місця та оптимізувати для швидшого та більш чуйного користувацького досвіду. Цей вичерпний посібник дослідить Navigation та Resource Timing API, пропонуючи практичні приклади та дієві поради для розробників у всьому світі.

Розуміння потреби в моніторингу продуктивності

Перш ніж заглиблюватися в деталі API, давайте зрозуміємо, чому моніторинг продуктивності є вирішальним:

• Користувацький досвід: Швидкий сайт забезпечує кращий користувацький досвід, підвищуючи задоволеність та залученість користувачів.
• Пошукова оптимізація (SEO): Пошукові системи, такі як Google, враховують швидкість сайту як фактор ранжування.
• Коефіцієнти конверсії: Швидші сайти часто мають вищі коефіцієнти конверсії. Користувачі з більшою ймовірністю завершать покупку або підпишуться на послугу, якщо сайт реагує швидко.
• Продуктивність на мобільних пристроях: Зі зростанням використання мобільних пристроїв оптимізація для мобільної продуктивності є важливою.
• Глобальне охоплення: Користувачі з різних частин світу можуть стикатися з різними умовами мережі. Моніторинг продуктивності допомагає забезпечити стабільний досвід для всіх користувачів, незалежно від їхнього місцезнаходження.

Знайомство з Frontend Performance API

Frontend Performance API — це набір інтерфейсів JavaScript, які надають доступ до детальних метрик продуктивності веб-сторінки. Він дозволяє розробникам вимірювати час, необхідний для завантаження сторінки, отримання ресурсів та обробки подій. Ця інформація може бути використана для виявлення вузьких місць у продуктивності та оптимізації сайту для кращого користувацького досвіду.

Основним інтерфейсом є Performance, доступний через window.performance. Цей інтерфейс надає методи та властивості для доступу до різноманітних даних, пов'язаних з продуктивністю.

Navigation Timing API: Вимірювання продуктивності завантаження сторінки

Navigation Timing API надає детальну інформацію про час різних етапів процесу завантаження сторінки. Це дозволяє точно визначити, де відбуваються затримки, і зосередити свої зусилля на оптимізації.

Ключові метрики, що надаються Navigation Timing

• navigationStart: Часова мітка, коли браузер починає завантажувати сторінку.
• unloadEventStart: Часова мітка, коли починається подія unload на попередній сторінці.
• unloadEventEnd: Часова мітка, коли закінчується подія unload на попередній сторінці.
• redirectStart: Часова мітка, коли починається перенаправлення.
• redirectEnd: Часова мітка, коли закінчується перенаправлення.
• fetchStart: Часова мітка, коли браузер починає отримувати документ.
• domainLookupStart: Часова мітка, коли починається пошук доменного імені.
• domainLookupEnd: Часова мітка, коли закінчується пошук доменного імені.
• connectStart: Часова мітка, коли браузер починає встановлювати з'єднання з сервером.
• connectEnd: Часова мітка, коли браузер завершує встановлення з'єднання з сервером.
• secureConnectionStart: Часова мітка, коли браузер починає рукостискання для безпечного з'єднання.
• requestStart: Часова мітка, коли браузер починає запитувати документ у сервера.
• responseStart: Часова мітка, коли браузер отримує перший байт відповіді від сервера.
• responseEnd: Часова мітка, коли браузер завершує отримання відповіді від сервера.
• domLoading: Часова мітка, коли браузер починає парсити HTML-документ.
• domInteractive: Часова мітка, коли браузер завершує парсинг HTML-документа і DOM готовий.
• domContentLoadedEventStart: Часова мітка, коли починається подія DOMContentLoaded.
• domContentLoadedEventEnd: Часова мітка, коли закінчується подія DOMContentLoaded.
• domComplete: Часова мітка, коли браузер завершує парсинг HTML-документа і всі ресурси завантажені.
• loadEventStart: Часова мітка, коли починається подія load.
• loadEventEnd: Часова мітка, коли закінчується подія load.

Доступ до даних Navigation Timing

Ви можете отримати доступ до даних Navigation Timing за допомогою властивості performance.timing:

            
const navigationTiming = performance.timing;

console.log('Navigation Start:', navigationTiming.navigationStart);
console.log('Domain Lookup Time:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Connect Time:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Response Time:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM Interactive:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM Complete:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Load Time:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

Інтерпретація даних Navigation Timing

Аналіз даних Navigation Timing може розкрити цінну інформацію про продуктивність вашого сайту. Наприклад:

• Високий час пошуку DNS: Вказує на потенційні проблеми з вашим DNS-провайдером або повільне розпізнавання DNS.
• Високий час з'єднання: Вказує на проблеми з мережевим підключенням вашого сервера або повільне рукостискання TLS.
• Високий час відповіді: Вказує на повільну обробку на стороні сервера або великі розміри відповідей.
• Високий час DOM Interactive: Вказує на неефективний код JavaScript або складну структуру DOM.
• Високий час DOM Complete: Вказує на повільне завантаження ресурсів, таких як зображення, скрипти та таблиці стилів.

Приклад: Обчислення часу до першого байта (TTFB)

Час до першого байта (TTFB) — це ключова метрика, яка вимірює час, необхідний браузеру для отримання першого байта даних від сервера. Низький TTFB є важливим для швидкого користувацького досвіду.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Time to First Byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

Високий TTFB може бути викликаний повільною обробкою на стороні сервера, мережевою затримкою або проблемами з інфраструктурою сервера. Оптимізація конфігурації сервера, використання мережі доставки контенту (CDN) та мінімізація мережевої затримки можуть допомогти зменшити TTFB.

Resource Timing API: Вимірювання продуктивності завантаження ресурсів

Resource Timing API надає детальну інформацію про час завантаження окремих ресурсів на веб-сторінці, таких як зображення, скрипти, таблиці стилів та шрифти. Це дозволяє визначити, які ресурси завантажуються найдовше, і оптимізувати їх відповідно.

Ключові метрики, що надаються Resource Timing

• name: URL-адреса ресурсу.
• initiatorType: Тип елемента, який ініціював запит на ресурс (наприклад, img, script, link).
• startTime: Часова мітка, коли браузер починає отримувати ресурс.
• redirectStart: Часова мітка, коли починається перенаправлення.
• redirectEnd: Часова мітка, коли закінчується перенаправлення.
• fetchStart: Часова мітка, коли браузер починає отримувати ресурс.
• domainLookupStart: Часова мітка, коли починається пошук доменного імені.
• domainLookupEnd: Часова мітка, коли закінчується пошук доменного імені.
• connectStart: Часова мітка, коли браузер починає встановлювати з'єднання з сервером.
• connectEnd: Часова мітка, коли браузер завершує встановлення з'єднання з сервером.
• secureConnectionStart: Часова мітка, коли браузер починає рукостискання для безпечного з'єднання.
• requestStart: Часова мітка, коли браузер починає запитувати ресурс у сервера.
• responseStart: Часова мітка, коли браузер отримує перший байт відповіді від сервера.
• responseEnd: Часова мітка, коли браузер завершує отримання відповіді від сервера.
• duration: Загальний час, витрачений на завантаження ресурсу.

Доступ до даних Resource Timing

Ви можете отримати доступ до даних Resource Timing за допомогою методу performance.getEntriesByType('resource'):

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resource Name:', resource.name);
  console.log('Initiator Type:', resource.initiatorType);
  console.log('Duration:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

Інтерпретація даних Resource Timing

Аналіз даних Resource Timing може допомогти вам виявити повільні ресурси та оптимізувати їх для швидшого завантаження. Наприклад:

• Великі зображення: Оптимізуйте зображення, стискаючи їх і використовуючи відповідні формати файлів (наприклад, WebP).
• Неоптимізовані скрипти та таблиці стилів: Мініфікуйте та стискайте скрипти та таблиці стилів, щоб зменшити їх розміри файлів.
• Повільні шрифти: Ефективно використовуйте веб-шрифти, створюючи їх підмножини та використовуючи властивості font-display.
• Сторонні ресурси: Оцініть вплив сторонніх ресурсів на продуктивність і за потреби розгляньте альтернативи.

Приклад: Виявлення повільних зображень

Цей приклад демонструє, як виявити повільні зображення за допомогою Resource Timing API:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Slow-loading images detected:');
  slowImages.forEach(image => {
    console.log('Image URL:', image.name);
    console.log('Duration:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

Після виявлення повільних зображень ви можете оптимізувати їх, стиснувши, змінивши розмір належним чином та використовуючи техніки відкладеного завантаження.

Практичні приклади та сценарії використання

Реальний сценарій: Оптимізація сайту електронної комерції

Розглянемо сайт електронної комерції, що обслуговує клієнтів по всьому світу. Аналіз даних Navigation та Resource Timing виявляє наступні проблеми:

• Високий TTFB для користувачів в Азії: Вказує на повільну обробку на стороні сервера або мережеву затримку між вихідним сервером та користувачами в Азії.
• Повільне завантаження зображень товарів: Зображення не оптимізовані для вебу, що призводить до тривалого часу завантаження.
• Неоптимізовані файли JavaScript: Файли JavaScript не мініфіковані та не стиснуті, що призводить до збільшення розмірів файлів.

На основі цих висновків можна впровадити наступні оптимізації:

• Впровадити мережу доставки контенту (CDN): Розподілити вміст сайту по кількох серверах по всьому світу, щоб зменшити затримку для користувачів у різних регіонах.
• Оптимізувати зображення товарів: Стиснути зображення за допомогою інструментів, таких як ImageOptim або TinyPNG, і використовувати відповідні формати файлів, як-от WebP.
• Мініфікувати та стискати файли JavaScript: Використовувати інструменти, такі як UglifyJS або Terser, для мініфікації файлів JavaScript та Gzip або Brotli для їх стиснення.
• Відкладене завантаження зображень: Впровадити відкладене завантаження для зображень, що знаходяться поза першим екраном, щоб покращити початковий час завантаження сторінки.

Після впровадження цих оптимізацій продуктивність сайту значно покращується, що призводить до кращого користувацького досвіду, вищих коефіцієнтів конверсії та покращення позицій в SEO.

Оптимізація продуктивності для мобільних пристроїв

Мобільні користувачі часто мають повільніші мережеві з'єднання порівняно з користувачами настільних комп'ютерів. Оптимізація для мобільної продуктивності є вирішальною для забезпечення безперебійного користувацького досвіду на мобільних пристроях.

Ось деякі специфічні техніки оптимізації для мобільних пристроїв:

• Використовуйте адаптивні зображення: Надавайте зображення різних розмірів залежно від розміру екрана пристрою, щоб зменшити обсяг даних, що передаються через мережу.
• Оптимізуйте для дотику: Переконайтеся, що кнопки та посилання достатньо великі та мають достатній простір, щоб їх було легко натискати на сенсорних пристроях.
• Мінімізуйте HTTP-запити: Зменште кількість HTTP-запитів, об'єднуючи файли CSS та JavaScript, вбудовуючи критичний CSS та використовуючи CSS-спрайти.
• Пріоритезуйте контент першого екрана: Завантажуйте контент, видимий на екрані, першим, щоб покращити сприйману продуктивність сайту.

За межами Navigation та Resource Timing: Дослідження інших API продуктивності

Хоча Navigation та Resource Timing є важливими, Frontend Performance API пропонує безліч інших інструментів для глибокого аналізу продуктивності:

• User Timing API: Дозволяє визначати власні метрики продуктивності та вимірювати час, необхідний для виконання певних подій у вашому додатку.
• Long Tasks API: Допомагає виявляти довготривалі завдання, які блокують основний потік і впливають на чуйність вашого додатку.
• Paint Timing API: Надає метрики, пов'язані з рендерингом сторінки, такі як First Paint (FP) та First Contentful Paint (FCP).
• Largest Contentful Paint (LCP): Вимірює час, необхідний для того, щоб найбільший елемент контенту у видимому вікні став видимим.
• Cumulative Layout Shift (CLS): Вимірює кількість несподіваних зсувів макета, що відбуваються під час завантаження сторінки.
• Event Timing API: Пропонує детальну інформацію про час взаємодії користувача зі сторінкою, наприклад, події кліку та натискання клавіш.

Інструменти для аналізу даних про продуктивність

Кілька інструментів можуть допомогти вам аналізувати дані Navigation та Resource Timing та виявляти вузькі місця у продуктивності:

• Інструменти розробника в браузері: Більшість сучасних браузерів надають вбудовані інструменти розробника, які дозволяють перевіряти дані Navigation та Resource Timing, аналізувати мережеві запити та профілювати код JavaScript.
• WebPageTest: Безкоштовний онлайн-інструмент, який дозволяє тестувати продуктивність вашого сайту з різних місць та браузерів.
• Lighthouse: Відкритий, автоматизований інструмент для покращення якості веб-сторінок. Він має аудити для продуктивності, доступності, прогресивних веб-додатків, SEO та іншого.
• Google PageSpeed Insights: Безкоштовний онлайн-інструмент, який аналізує продуктивність вашого сайту та надає рекомендації щодо покращення.
• New Relic, Datadog та інші інструменти APM: Пропонують детальний моніторинг продуктивності та можливості аналізу для веб-додатків.

Найкращі практики для оптимізації веб-продуктивності

Ось деякі загальні найкращі практики для оптимізації веб-продуктивності:

• Мінімізуйте HTTP-запити: Зменште кількість HTTP-запитів, об'єднуючи файли CSS та JavaScript, використовуючи CSS-спрайти та вбудовуючи критичний CSS.
• Використовуйте мережу доставки контенту (CDN): Розподіліть вміст вашого сайту по кількох серверах по всьому світу, щоб зменшити затримку для користувачів у різних регіонах.
• Оптимізуйте зображення: Стискайте зображення, використовуйте відповідні формати файлів (наприклад, WebP) та використовуйте адаптивні зображення.
• Мініфікуйте та стискайте CSS і JavaScript: Зменште розміри файлів CSS і JavaScript, мініфікуючи та стискаючи їх.
• Використовуйте кешування в браузері: Налаштуйте свій сервер на встановлення відповідних заголовків кешу, щоб дозволити браузерам кешувати статичні ресурси.
• Оптимізуйте веб-шрифти: Створюйте підмножини веб-шрифтів, використовуйте властивості font-display та розміщуйте шрифти на власному домені.
• Відкладайте завантаження некритичних ресурсів: Використовуйте відкладене завантаження для зображень поза першим екраном та відкладайте завантаження некритичних файлів JavaScript.
• Регулярно моніторте продуктивність: Постійно моніторте продуктивність вашого сайту за допомогою Frontend Performance API та інших інструментів, щоб проактивно виявляти та вирішувати проблеми з продуктивністю.

Висновок

Frontend Performance API, зокрема Navigation та Resource Timing API, надає безцінну інформацію про продуктивність вашого сайту. Розуміючи та використовуючи ці API, ви можете виявляти вузькі місця у продуктивності, оптимізувати свій сайт для швидшого завантаження і, зрештою, забезпечити кращий користувацький досвід для вашої глобальної аудиторії. Не забувайте постійно моніторити продуктивність вашого сайту та адаптувати свої стратегії оптимізації за потреби, щоб залишатися попереду та забезпечувати швидкий, чуйний та захоплюючий онлайн-досвід.